<script setup>

import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {inject, onMounted, reactive, ref, toRaw, toRefs, unref} from "vue";
import QAService from "@/service/impl/QAService.js";
import QAModel from "@/model/QAModel.js";
import AuthorityBtn from "@/components/AuthorityBtn.vue";
import Dialog from "@/components/dialog/Dialog.vue";
import dialogJson from "@/components/dialog/dialogJson.js";
import SentenceConfig from "@/components/language/SentenceConfig.vue";
import ModelService from "@/service/impl/ModelService.js"
import {Delete} from "@element-plus/icons-vue";




const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const qaModel = ref(new QAModel())
const contentDialog = dialogJson()
const text = ref('')
const classification = ref([])
const testTrainingDialog = dialogJson()
const sentenceConfigDialog = dialogJson()
const models = ref([])
const config = ref(null)

const pageTable = ref(null)

onMounted(() => {
    module.value.page.show = true
    module.value.init(QAService.url.add, QAService.url.edit,
        QAService.url.del, null, null)
    module.value.operations.width = "280px"
    module.value.dialog.width = "40%"
    init()
})

const init = () => {
    module.value.dialog.show = false
    QAService.list(data.value.source()).then(res => {
        classification.value = res.data.classificationVO
        config.value = res.data.config
        models.value = res.data.models
        res.data = res.data.qaList
        data.value.init(res)
    })
}

const editOpen = (data, index, type) => {
    module.value.dialog.load = false
    const fun = {
        0: () => {
            qaModel.value = new QAModel()
        },
        1: () => {
            qaModel.value = data
        }
    }
    fun[type]()
}

const editConfirm = (type) => {
    const fun = {
        0: (src) => {
            QAService.add(qaModel.value).then(res => {
                src()
            })
        },
        1: (src) => {
            qaModel.value.content = text.value
            QAService.edit(qaModel.value).then(res => {
                contentDialog.value.show = false
                src()
            })
        }
    }
    fun[type](init)

}

const delConfirm = (obj) => {
    QAService.del(obj).then(res => {
        init()
    })
}

const showContent = (data) => {
    text.value = data.content
    contentDialog.value.width = "60%"
    contentDialog.value.title = data.title
    contentDialog.value.show = true
    qaModel.value = data
}

const training = () => {
    let items = pageTable.value.$refs.table.getSelectionRows().map(item => item.id)
    if(!items || items < 1){
        message.warning("请选择要训练的样本")
        return
    }
    sentenceConfigDialog.value.title = "设置参数"
    sentenceConfigDialog.value.width = "40%"
    sentenceConfigDialog.value.show = true
    sentenceConfigDialog.value.data = JSON.parse(JSON.stringify(config.value));
}
const onDelModel = (remark) => {
    ModelService.modelDel({
        remark: remark,
        modelType: 2
    }).then(res => {
        ModelService.modelAll( {
            modelType: 2
        }).then(res => {
            models.value = res.data
        })
    }).catch(e => {

    })
}
const onTraining = () => {
    let items = pageTable.value.$refs.table.getSelectionRows().map(item => item.id)
    if(!items || items < 1){
        message.warning("请选择要训练的样本")
        return
    }
    QAService.qaTraining({
        id : items,
        config: sentenceConfigDialog.value.data,
        remark: sentenceConfigDialog.value.data.remark
    }).then(res => {
        sentenceConfigDialog.value.show = false
    })
}

const testTraining = () => {
    // 查询qa所有模型，选一个
    testTrainingDialog.value.title = '测试样本'
    testTrainingDialog.value.width = '40%'
    testTrainingDialog.value.show = true
    testTrainingDialog.value.data = {
        str : '',
        json : ''
    }
    // ModelService.modelAll( {
    //     modelType: 2
    // }).then(res => {
    //     models.value = res.data
    //
    // })
}

const onTest = () => {
    if(!testTrainingDialog.value.data?.str){
        return
    }
    if(!testTrainingDialog.value.data?.model){
        message.warning("请选择一个模型")
        return
    }
    testTrainingDialog.value.data.str = testTrainingDialog.value.data.str.trim()
    QAService.qaTestTraining({
        id :  pageTable.value.$refs.table.getSelectionRows().map(item => item.id),
        data: testTrainingDialog.value.data.str,
        model: testTrainingDialog.value.data.model
    }).then(res => {
            testTrainingDialog.value.data.json = res.data
        })
}

</script>
<template>
    <Page
        @refresh="init"
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="delConfirm"
        ref="pageTable"
    >
        <template #table-left>
        </template>
        <template #operate-before>
        </template>
        <template #operate-after>
            <el-button type="primary" @click="training">训练样本</el-button>
            <el-button type="primary" @click="testTraining">测试样本</el-button>
        </template>
        <template #table-column>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="className" :label="$t('qa.className')" width="150"/>
            <el-table-column prop="title" :label="$t('qa.title')"/>
            <el-table-column prop="createTime" :label="$t('btn.createTime')" width="220"/>
        </template>
        <template #after-table-event="row">
            <authority-btn :path="QAService.url.edit">
                <el-button type="success" @click="showContent(row.data)">{{ $t('qa.addContent') }}</el-button>
            </authority-btn>
        </template>
        <template #table-dialog>
            <el-form :rules="qaModel.rules" :label-width="100" :label-position="'left'" :model="qaModel" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('qa.title')" prop="title">
                    <el-input v-model="qaModel.title" autocomplete="off"/>
                </el-form-item>
                <el-form-item :label="$t('qa.className')" prop="classificationId">
                    <el-select
                        v-model="qaModel.classificationId"
                        clearable :disabled="qaModel?.id !== null"
                    >
                        <el-option
                            v-for="item in classification"
                            :key="item.id"
                            :label="item.className"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <template #table-search>

        </template>
    </Page>

    <Dialog :dialog="contentDialog">
        <el-input
            v-model="text"
            style="width: 100%"
            :autosize="{ minRows: 12, maxRows: 12 }"
            type="textarea"
            placeholder="Please input"
        />
<!--        <v-md-editor-->
<!--            right-toolbar=""-->
<!--            :tab-size="4"-->
<!--            :autofocus="true"-->
<!--            v-model="text"-->
<!--            height="350px"-->
<!--            mode="editable"-->
<!--            :toolbar="toolbar"-->
<!--            left-toolbar="clear h bold italic strikethrough quote hr | ul ol table | link code role"-->
<!--        ></v-md-editor>-->
        <template #table-dialog-btn>
            <el-button type="primary" @click="editConfirm(1)">{{ $t('btn.confirm') }}</el-button>
        </template>
    </Dialog>

    <Dialog :dialog="testTrainingDialog" >
        <el-row class="test-training">
            <el-row class="test-training-top">
                <pre>{{testTrainingDialog.data.json}}</pre>
            </el-row>
            <el-row class="test-training-bottom">
                <el-select v-model="testTrainingDialog.data.model" placeholder="选择模型" style="width: 240px;">
                    <el-option
                        v-for="item in models"
                        :key="item.remark"
                        :label="item.remark"
                        :value="item.remark"
                    >
                        <span style="float: left">{{ item.remark }}</span>
                        <el-icon style="float: right;margin-top: 10px" @click.stop="onDelModel(item.remark)"><Delete /></el-icon>
                    </el-option>
                </el-select>
                <el-input
                    v-model="testTrainingDialog.data.str"
                    style="width: 100%;height: calc(100% - 45px)"
                    resize="none"
                    type="textarea"
                    placeholder="请输入内容"
                />
            </el-row>
        </el-row>
        <template #table-dialog-btn>
            <el-button type="primary" @click="onTest">测试</el-button>
        </template>
    </Dialog>

    <SentenceConfig v-if="sentenceConfigDialog.show" :default-config="config" :models="models" :type="'qa'"
                    :sentence-config-dialog="sentenceConfigDialog" @on-training="onTraining" />

</template>

<style lang="scss" scoped>
.test-training{
    height: 300px;
    width: 100%;
}
.test-training-top{
    height: 190px;
    width: 100%;
    overflow-y: auto;
}
.test-training-bottom{
    width: 100%;
    height: auto;
}
:deep(.v-md-textarea-editor textarea){
    background-color: white;
}
</style>
